
<template>
  <div class="mtask-details">
    <div class="Mtask-main-list">
      <ul v-if="detail">
        <li>
          <div class="main-list-box">
            <div class="main-list-left">
							<span>
								<a>ID:</a>
								<a>{{detail.taskid}}</a>
								<!--<a>(剩余:{{detail.number}}单)</a>-->
							</span>
              <span v-if="mainType==='pay'">
								{{detail.goodsMoney}}元
							</span>
            </div>
            <div class="main-list-right">
							<span style="float: left;">
							 	<a><img src="static/imgs/qian.png" alt="" title=""/></a>
							 	<a>{{detail.serviceMoney}}</a>
							 </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 任务要点 -->
    <div class="task-con">
      <ul>
        <li>
          <div class="task-box">
						<span style="float: left;">
							<a class="task-img"><img src="static/imgs/a.png" alt="" title=""/></a>
							<a>任务要点</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>任务类型</a>
						</span>
            <span>
							<a class="color-red">{{mainType==='pay'?detail.taskkeyTypeStr:typeTOString()}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>搜索关键字</a>
						</span>
            <span>
							<a>{{detail.keyword}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>规格尺码</a>
						</span>
            <span>
							<a>{{detail.colorSize}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>订单留言</a>
						</span>
            <span>
							<a :title="detail.orderwords">{{detail.orderwords}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>评论要求</a>
						</span>
            <span>
							<a :title="detail.appoints">{{detail.appoints}}</a>
						</span>
          </div>
        </li>
        <li>
          <div class="task-box">
						<span>
							<a>是否假聊</a>
						</span>
            <span>
							<a>{{detail.chatNecessary===0?'否':'是'}}</a>
						</span>
          </div>
        </li>
        <!-- <li>
          <div class="task-box">
						<span>
							<a>默认签收</a>
						</span>
            <span>
							<a>{{detail.receiveDefault===0?'否':'是'}}</a>
						</span>
          </div>
        </li> -->
        <li>
          <div class="task-box">
						<span>
							<a>接单限制</a>
						</span>
            <span>
							<a :title="detail.rebuy">{{detail.rebuy}}</a>
						</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- 卖家额外要求 -->
    <div class="extra-task">
      <div class="task-box-div">
        <div class="task-box">
          <a><img src="static/imgs/a.png" alt="" title="" /></a>
          <a>卖家额外要求:</a>
        </div>
      </div>
      <div class="task-box-t">
        <div class="task-box explains">{{detail.explains}}</div>
      </div>
    </div>
    <!-- 选择 -->
    <div class="task-select select-account">
      <div class="task-box">
        <a @click="selectAccount">请选择账号</a>
        <a @click="getTask">点击接取任务</a>
      </div>
    </div>
    <!-- VIP -->
    <router-link :to="{name:'userVip'}">
      <div class="task-vip">
        开通vip
      </div>
    </router-link>
    <!-- fixed -->
    <div class="fixed-nav">
      <index-footer></index-footer>
    </div>
    <mt-popup id="selectAccount" :closeOnClickModal="false" position="bottom" v-model="popupVisible" popup-transition="popup-fade">
      <mt-checklist align="right" :max="1" v-model="selectValue" :options="accountList"></mt-checklist>
      <div class="foot-box">
        <mt-button size="small" type="default" @click="confirmAccount">确定</mt-button>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { taskService } from "#/service";
import { mapGetters } from "vuex";
import IndexFooter from "@/components/base/IndexFooter";
import { MessageBox, Toast, Popup } from "mint-ui";
export default {
  name: "TaskDetails",
  data() {
    return {
      selectValue: [],
      popupVisible: false,
      accountList: [],
      account: [],
      id: "",
      detail: {},
      mainType: ""
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.mainType = this.$route.query.mainType;
    if (this.user.taobaoList) {
      this.account = this.user.taobaoList.slice(0);
    }
    if (!this.id) {
      this.$router.push({
        name: "task"
      });
    } else if (!this.mainType) {
      this.$router.push({
        mission: "mission"
      });
    } else {
      this.query();
    }
  },
  methods: {
    confirmAccount() {
      if (this.selectValue.length === 0) {
        Toast("请选择账号");
      } else {
        this.popupVisible = false;
      }
    },
    selectAccount() {
      this.popupVisible = true;
    },
    getTask() {
      if (this.selectValue.length === 0) {
          Toast("请选择账号");
        } else {
          taskService.isIdCard({
          params: {},
          success: res => {
            if (res.data) {
              this.meet()
            } else {
              MessageBox({
                title: '提示',
                message: '身份证未认证用户，仅可获得80%的佣金收益，如要获得全部佣金收益，请绑定身份证。',
                // confirmButtontext: '绑定身份证',
                // cancelButtonText: '继续接单',
                showCancelButton: true,
                closeOnClickModal: false,
                showConfirmButton: true,
              }).then(action => {
                action === 'confirm' ? this.$router.push('/bindId') : this.meet()
              })
            }
          }
        });
      }
    },
    meet() {
      MessageBox({
        title: "温馨提示",
        message:
          "温馨提示\n" +
          `请于两小时内完成任务,超时平台会自动取消任务并扣取${
            this.mainType === "pay" ? 0.5 : 0.2
          }金!若于30分钟内主动撤单,将不会扣取佣金, 30分钟后主动撤单,扣取${
            this.mainType === "pay" ? 0.2 : 0.1
          }金`,
        showCancelButton: true
      }).then(async action => {
        if (action === "confirm") {
          taskService.receiveTask({
            params: {
              taskkeyId: this.id
            },
            success: () => {
              Toast({
                message: "操作成功"
              });
              setTimeout(() => {
                this.$router.push({
                  name: "orderDetails"
                });
              }, 800);
            }
          });
        }
      });
    },
    query() {
      let { id } = this;
      taskService.taskDetail({
        params: {
          taskkeyid: id,
          type: this.mainType
        },
        success: res => {
          this.detail = res.data;
          this.accountList = res.data.accountList.map(v => {
            return {
              label: `${v.acount} 今日可接单数:${v.numberOfTodayAcceptTask}`,
              value: v.id
            };
          });
        }
      });
    },
    typeTOString() {
      if (!this.detail.taskkeyType) return "";
      let arrStr = (this.detail.taskkeyType + "").split("");
      let str = "";
      arrStr.map(item => {
        str += this.switchStr(item);
      });
      return str;
    },
    switchStr(str) {
      switch (str) {
        case "1":
          return "浏览";
        case "2":
          return "收藏商品";
        case "3":
          return "关注店铺任务";
        case "4":
          return "加购";
        default:
          return "";
      }
    }
  },
  computed: {
    ...mapGetters(["user"]),
    typeStr() {}
  },
  components: {
    IndexFooter
  }
};
</script>

<style lang="less">
.mint-toast {
  z-index: 9999;
}
.mtask-details {
  .mint-msgbox-btn {
    flex: initial !important;
  }
}
#selectAccount {
  padding-top: 0.2rem;
  font-size: 12px;
  width: 100%;
  .mint-checkbox-input:checked + .mint-checkbox-core {
    background-color: #26a2ff;
    border-color: #26a2ff;
  }
  .mint-cell-wrapper {
    background-image: initial;
  }
  .mint-cell:last-child {
    background-image: initial;
  }
  .mint-checklist-title {
    margin: 0;
  }
  .foot-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    .mint-button--small {
      width: 0.8rem;
    }
  }
}
html,
body {
  background: #f5f5f5;
}
.mtask-details {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 0.5rem;
}

.Mtask-main-list {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.Mtask-main-list ul li {
  width: 100%;
  height: 0.86rem;
  float: left;
  margin-bottom: 0.1rem;
  background: white;
}

.Mtask-main-list ul li:last-child {
  margin-bottom: none;
}

.main-list-box {
  width: 92%;
  margin: 0 auto;
}

.main-list-left {
  width: 100%;
  float: left;
  margin-top: 0.15rem;
  height: auto;
  border-bottom: 1px dashed #626262;
}

.main-list-left span {
  display: block;
  float: left;
  color: #626262;
  font-size: 0.12rem;
}

.main-list-left span a {
  display: inline-block;
  float: left;
}

.main-list-left span:last-child {
  float: right;
}

.main-list-right {
  width: 100%;
  height: auto;
  float: left;
  margin-top: 0.15rem;
}

.main-list-right span {
  display: block;
  float: left;
}

.main-list-right span a {
  display: inline-block;
  float: left;
}

.main-list-right span:first-child a {
  width: 0.16rem;
  height: 0.18rem;
  color: #faad45;
  font-size: 0.18rem;
  margin-right: 0.05rem;
}

.main-list-right span:first-child a img {
  display: block;
  width: 100%;
}

.task-con {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.task-con ul li {
  width: 100%;
  height: 0.36rem;
  line-height: 0.36rem;
  float: left;
  background: white;
  border-bottom: 0.01rem solid #e6e6e6;
}

.task-box {
  width: 92%;
  margin: 0 auto;
}
.explains {
  margin-bottom: 15px;
}
.task-box span {
  display: block;
  float: left;
}

.task-box span:last-child {
  float: right;
}

.task-box span a {
  display: inline-block;
  float: left;
  color: #333;
  font-size: 0.13rem;
}

.task-box span:last-child .color-red {
  color: red;
}

.task-box span .task-img {
  width: 0.2rem;
  height: 0.2rem;
  margin: 0.07rem 0.05rem 0 0;
}

.task-box span .task-img img {
  display: block;
  width: 100%;
}

.task-box span:last-child {
  float: right;
}

.task-box span:last-child a {
  color: #4097ff;
}

.extra-task {
  width: 100%;
  height: 0.64rem;
  margin-top: 0.1rem;
  background: white;
}

.task-box-div {
  width: 100%;
  height: 0.37rem;
  line-height: 0.37rem;
  border-bottom: 0.01rem solid #e6e6e6;
}

.task-box-div a {
  display: inline-block;
  float: left;
  color: #333;
  font-size: 0.13rem;
}

.task-box-div a img {
  width: 0.2rem;
  height: 0.2rem;
  display: block;
  margin: 0.1rem 0.05rem 0 0;
}

.task-box-t {
  width: 100%;
  height: 0.26rem;
  line-height: 0.26rem;
  color: #4097ff;
  font-size: 0.12rem;
}
.task-select {
  width: 100%;
  height: 0.53rem;
  margin-top: 0.1rem;
  background: white;
}
.task-select a {
  display: inline-block;
  float: left;
  width: 1.55rem;
  height: 0.3rem;
  line-height: 0.3rem;
  background: #4097ff;
  text-align: center;
  color: white;
  font-size: 0.12rem;
  border-radius: 0.05rem;
  margin: 0.1rem 0.3rem 0 0;
  cursor: pointer;
}
.task-select a:last-child {
  margin-right: inherit;
}
.task-vip {
  width: 100%;
  height: 0.36rem;
  line-height: 0.36rem;
  text-align: center;
  background: white;
  margin-top: 0.1rem;
  color: #4097ff;
  font-size: 0.12rem;
  margin-bottom: 0.1rem;
}
</style>
